import React, {useState} from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Printing from '../views/printing/printing';
import HomePage from '../views/HomePage/HomePage';
const Tab = createBottomTabNavigator();

function BottomNav() {
  const [hidden, setHidden] = useState(true);
  let [color] = useState('#fff');
  return (
    <Tab.Navigator
      initialRouteName="HomePage"
      screenOptions={{
        tabBarActiveTintColor: '#1398DD',
      }}
      tabBarPosition="bottom" //设置导航栏的位置，安卓和ios默认的不一样，我设置的没有效果
      sceneContainerStyle={{
        backgroundColor: color, //设置整个页面容器背景颜色，不是底部导航栏的
      }}>
      <Tab.Screen
        name="HomePage"
        component={HomePage}
        listeners={({navigation, route}) => ({
          tabPress: e => {
            console.log(route);
          },
        })}
        options={{
          tabBarLabel: '纂刻查字',
          tabBarLabelStyle: {
            //设置底部导航栏的字的样式
            // backgroundColor:"black",
          },
          tabBarLabelPosition: 'below-icon', //设置字在图标的下面还是旁边，手机和平板默认的不一样
          headerShown: false, //是否显示页面顶部的头，默认为true
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="selection-search"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Printing" //页面路由地址，其他页面跳转到当前页面的地址就是name
        component={Printing}
        options={{
          tabBarLabel: '印谱', //显示的字
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="book-open"
              color={color}
              size={size}
            />
          ),
          headerShown: false,
          //   tabBarBadge: 3,//在导航栏的图标角上显示的徽标
        }}
      />
    </Tab.Navigator>
  );
}
export default BottomNav;
